<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('表格数据汇总')" />
</head>
<body class="gray-bg">

<div class="col-sm-12 search-collapse">
	<form id="time-form">
		<div class="select-list">
			<ul>
				<li>
					学生姓名：<input type="text" name="listenStudentName"/>
				</li>
				<li>
					学生籍贯：<input type="text" name="listenPlace"/>
				</li>
				<li>
					学生状态：<select name="listenStatus" th:with="type=${@dict.getType('sys_listen_Status')}">
					<option value="">所有</option>
					<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
				</select>
				</li>
				<li>
					<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
					<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('time-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
				</li>
			</ul>
		</div>
	</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
	<a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:stxs:add" >
		<i class="fa fa-plus"></i> 新增
	</a>
</div>
<div class="container-div">
	<div class="row">
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table"></table>
		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
</body>
<script th:inline="javascript">
	/*
<![CDATA[*/
	contextPath = /*[[@{/}]]*/'';
	/*]]
    */
	var prefix = contextPath + "system/listen";
	var datas = [[${@dict.getType('sys_user_sex')}]];
	var types = [[${@dict.getType('sys_listen_Status')}]];
	$(function() {
		var options = {
			url: prefix + "/list",
			createUrl: prefix + "/add",
			modalName: "学生",
			removeUrl: prefix + "/remove",
			updateStatus:prefix+"/Status",
			updateUrl: prefix + "/edit/{id}",
			showFooter: true,
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			footerStyle: footerStyle,
			columns: [{
				field: 'listenId',
				/*选中
				checkbox: true,*/
				title: '主键'
			},
				{
					field : 'listenId',
					title : '用户ID'
				},

				{
					field : 'listenStudentName',
					title : '用户姓名'
				},
				{
					field : '',
					title : '学生班级'
				},
				{
					field : 'listenStudent_Number',
					title : '学生手机'
				},
				{
					field : 'listenStudentCard',
					title : '学生身份证'
				},
				{
					field : 'listenPlace',
					title : '学生籍贯'
				},

				{
					field: 'listenSex',
					title: '性别',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(datas, value);
					}
				},
				{
					field: 'listenStatus',
					title: '状态',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(types, value);
					}
				},
				{
					field : 'listenCreatTime',
					title : '试听开始时间'

				},
				{
					field : 'listenFinshTime',
					title : '试听结束时间',

				},
				{
					field : 'listenRemarks',
					title : '备注/原因'
				},

				{
					title: '操作',
					align: 'center',
					formatter: function(value, row, index) {
						var actions = [];
						actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.updateStatus(\'' + row.listenId + '\')"><i class=""></i>结束试听</a> ');
						actions.push('<a class="btn btn-success btn-xs" href="#"onclick="$.operate.edit(\'' + row.listenId + '\')"><i class="fa fa-edit"></i>备注/原因</a> ');
						actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.listenId + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
					}
				}]
		};
		$.table.init(options);
	});

	function footerStyle(column) {
		return {
//         	    userBalance: {
//         	        classes: 'class'
//         	    },
			userBalance: {
				css: { color: 'red', 'font-weight': 'normal' }
			}
		}[column.field]
	}
</script>
</body>
</html>